<div class="barmain">
	<div class="barmask"></div>
	<a class="ds-bar ds-bar-edit" title="编辑" href="javascript:;" ajax-href="/module-editor/banner.html" ajax-data="" ajax-title="图片切换"></a>
	<a class="ds-bar ds-bar-top" title="上层" href="javascript:void(0);"></a>
	<a class="ds-bar ds-bar-down" title="下层" href="javascript:void(0);"></a>
	<a class="ds-bar ds-bar-del" title="删除" href="javascript:void(0);"></a>
</div>

<div id="module_html" class="mid_slider_1">
	<div class="swipe">
		<ul id="slider">
			<li><a href="#"><img src="/module/2/images/banner02.jpg" /></a></li>
			<li><a href="#"><img src="/module/2/images/banner03.jpg" /></a></li>
			<li><a href="#"><img src="/module/2/images/banner04.jpg" /></a></li>
			<li><a href="#"><img src="/module/2/images/banner05.jpg" /></a></li>
		</ul>
		<div id="pagenavi"></div>
	</div>
</div>

<div id="module_css">
	<style type="text/css">
		.mid_slider_1{width:100%;overflow:hidden;background:#FFF;}
		.mid_slider_1 .swipe ul,.mid_slider_1 .swipe li{margin:0;padding:0;list-style:none;overflow:hidden;}
		.mid_slider_1 .swipe img{width:100%;height:auto;display:block;}
		.mid_slider_1 .swipe{overflow:hidden;position:relative;}
		.mid_slider_1 .swipe ul{-webkit-transition:left 800ms ease-in 0;-moz-transition:left 800ms ease-in 0;-o-transition:left 800ms ease-in 0;-ms-transition:left 800ms ease-in 0;transition:left 800ms ease-in 0;}
		.mid_slider_1 .swipe #pagenavi{position:absolute;left:0;bottom:7px;text-align:center;width:100%;}
		.mid_slider_1 .swipe #pagenavi a{width:6px;height:6px;line-height:99em;background:#999;border-radius:50%;margin:0 3px;overflow:hidden;cursor:pointer;display:inline-block;*display:inline;*zoom:1;}
		.mid_slider_1 .swipe #pagenavi a.active{background:#FFF;}
	</style>

	<script type="text/javascript" src="/module/2/js/mid_slider_1.js"></script>
	<script type="text/javascript">
		$.banner = (function(){
			var num = 0;
			num = $("#slider li").length;
			var html = "";
			html = "<a href='javascript:void(0);' {c}>{i}</a>";
			var lasthtml, thtml;
			lasthtml = "";

			for(var i = 0; i < num; i++){
				thtml = "";
				if (i == 0) {
					thtml = html.replace("{c}", "class='active' ");
				} else {
					thtml = html.replace("{c}", "");
				}
				thtml = thtml.replace("{i}", i);
				lasthtml += thtml;
			};

			$("#pagenavi").html(lasthtml);
			var active = 0,
					as = $('#pagenavi a');

			for (var i = 0; i < as.length; i++) {
				(function() {
					var j = i;
					as[i].onclick = function() {
						t2.slide(j);
						return false;
					}
				})();

			}

			var t2 = new TouchSlider({
				id: 'slider',
				speed: 600,
				timeout: 6000,
				before: function(index){
					as[active].className = '';
					active = index;
					as[active].className = 'active';
				}
			});

			setTimeout(function(){
				t2.resize();
			},100);

		});
		$(function(){
			$.banner();
		});
	</script>
</div>